<template>
	<view class="i-list-nav" :style="[bodyStyle]">
		<view :style="[boxStyle]">
			<view class="nav-item " @tap="jumpLink(item.link)" v-for="(item, index) in option.list" :key="index">
				<view class="e-flex e-flex-between ">
					<view class="e-flex ">
						<view class="e-m-r-20 img-48" v-if="option.iconShow"  >
							<load-image mode="aspectFill" :size="['48rpx']" :src="item.url"></load-image>
						</view>
						<view class="c-333 e-font-30 fw-600" :style="[{color:option.titleTextColor}]">{{item.titleText}}</view>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'
	
	type ImgItem = {
		url : string
		titleText: string
		link : pageLink,
	
	}
	
	const props = withDefaults(defineProps<{
		option : {
			styleType : 0 | 1 | 2
			list:ImgItem[]
			backgroundColor: string
			titleTextColor: string
			navBackgroundColor:string
			iconShow: boolean
			iconColor: string
			borderColor: string
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			list:[],
			backgroundColor: '',
			titleTextColor: 'rgba(48, 49, 51, 1)',
			navBackgroundColor: 'rgba(255, 255, 255, 1)',
			iconShow: true,
			iconColor: 'rgba(192, 196, 204, 1)',
			borderColor: 'rgba(242, 246, 252, 1)',
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	const ctx = useCurrentInstance()
	
	const { bodyBoxStyle, jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const bodyStyle = computed(() => {
		return {
			background: props.option.backgroundColor ,
			padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)}  ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`,
			'--color':props.option.iconColor,
			'--borderColor':props.option.borderColor
		}
	})
	
	const boxStyle = computed(() => {
		return [bodyBoxStyle.value,{
				overflow: 'hidden',
				background: props.option.navBackgroundColor ,
			}]
	})

</script>

<style scoped lang="scss">

.nav-item {
	padding: 0 30rpx;
	>view{
		padding: 30rpx 0;
		border-bottom: 2rpx solid var(--borderColor);
	}
	&:last-child{
		>view{
			border: none;
		}
		
	}
}
.arrow {
	width: 0;
	height: 0;
	border: solid var(--color);
	border-width: 0 2rpx 2rpx 0;
	padding: 6rpx;
	transform: translateY(4rpx) rotate(-45deg);
}
</style>
